<!--
 * @Author: your name
 * @Date: 2020-04-20 11:54:00
 * @LastEditTime: 2020-06-18 12:08:19
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jd-jdp-front\src\components\FilingSystem\FactoryDirectOrder.vue
 -->
<template>
  <div class="factoryOrder">
    <!-- 筛选 -->
    <el-container class="screening-box">
      <el-form :inline="true" :model="searchData" class="form" ref="form" :rules="rules" label-position="right" label-width="140px">
        <el-header class="screening-head">
          <div class="title">
            <i class="el-icon-search el-icon--left"></i>筛选查询
          </div>
          <div>
            <span class="toggle" v-show="showScreening" @click="showScreening = !showScreening">
              <i class="el-icon-arrow-up el-icon--left"></i>收起筛选
            </span>
            <span class="toggle" v-show="!showScreening" @click="showScreening = !showScreening">
              <i class="el-icon-arrow-down el-icon--left"></i>展开筛选
            </span>
            <el-button type="primary" class="tlwok-btn" @click="onSubmitForm('form', searchFunc)">查 询</el-button>
            <el-button type="primary" class="tlwok-btn" plain @click="onResetForm('form')">重置</el-button>
          </div>
        </el-header>
        <el-main class="screening-body" v-show="showScreening">
          <el-form-item label="订单号：" prop="jdOrderId">
            <el-input v-model.number="searchData.jdOrderId" maxlength="30" size="small" placeholder="请输入订单号"></el-input>
          </el-form-item>
          <el-form-item label="收货人姓名：" prop="jdReciverName">
            <el-input size="small" v-model.number="searchData.jdReciverName" maxlength="11" placeholder="请输入收货人姓名"></el-input>
          </el-form-item>
          <el-form-item label="下单时间：" prop="orderTime">
            <el-date-picker v-model="searchData.orderTime" size="small" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"></el-date-picker>
          </el-form-item>
          <el-form-item label="采购单号：" prop="purchaseId">
            <el-input size="small" v-model="searchData.purchaseId" placeholder="请输入采购单号"></el-input>
          </el-form-item>
          <el-form-item label="下单账户：" prop="jdBuyerName">
            <el-input size="small" v-model="searchData.jdBuyerName" placeholder="请输入买家名(下单账号)"></el-input>
          </el-form-item>
          <el-form-item label="完成时间：" prop="finishTime">
            <el-date-picker v-model="searchData.finishTime" type="daterange" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"></el-date-picker>
          </el-form-item>
          <el-form-item label="回款状态：" prop>
            <el-select size="small" v-model="searchData.payState" placeholder="请选择">
              <el-option v-for="status in collectionStatusList" :key="status.code" :label="status.desc" :value="status.code">{{status.desc}}</el-option>
            </el-select>
          </el-form-item>
        </el-main>
      </el-form>
    </el-container>

    <!-- tableBox -->
    <div class="tableList">
      <div class="statusBox">
        <div class="statusBtn" v-for="item in typeList" :key="item.value" :class="item.active ? 'statusActive' : ''" @click="filterList(item)">
          <span>{{ item.desc }}</span>
          （
          <span class="count">{{ item.number }}</span>）
        </div>
      </div>
      <!-- table -->
      <div class="tableBox">
        <div class="title">
          <div class="left">
            <img class="icon" src="@/assets/old/image/list1.png" alt />
            分配订单
          </div>
          <div class="btnArea">
            <div class="btn" @click="exportExcel()">导出所选订单</div>
            <div class="btn" @click="bulkOutStock()">批量出库</div>
          </div>
        </div>

        <el-table ref="multipleTable" :data="limitTableData" style="width: 100%" @selection-change="handleSelectionChange" border :span-method="arraySpanMethod" class="orderListTable" :header-cell-style="tableHeaderColor">
          <el-table-column type="selection" align="center" width="50"></el-table-column>
          <el-table-column label="商品信息" width="320">
            <template slot-scope="scope">
              <template v-if="scope.$index % 2 === 0">
                <span class="orderInfo">订单号：{{ scope.row.jdOrderId }}</span>
                <span class="orderInfo">下单时间：{{ scope.row.orderTime | timeFilter }}</span>
                <span v-if="scope.row.orderDistributionTime" class="orderInfo">分配时间：{{ scope.row.orderDistributionTime | timeFilter }}</span>
                <span v-if="scope.row.orderFinishTime" class="orderInfo">完成时间：{{ scope.row.orderFinishTime | timeFilter }}</span>
              </template>
              <template v-else>
                <ul>
                  <li v-for="orderItem in scope.row.jdPtradeOrderItems.slice(0, 3)" :key="orderItem.id" class="productItem">
                    <img :src="orderItem.skuUrl" class="image" />
                    <div>
                      <p class="productName">{{ orderItem.skuName }}</p>
                      <div class="productInfo">
                        <span>SKU：{{ orderItem.skuId }}</span>
                        <span>数量：{{ orderItem.num }}</span>
                      </div>
                    </div>
                  </li>
                </ul>
                <p class="moreProduct" v-if="scope.row.jdPtradeOrderItems && scope.row.jdPtradeOrderItems.length > 3">更多信息查看详情</p>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" label="金额（元）" width="120">
            <template slot-scope="scope">
              <template v-if="scope.$index % 2 === 0">
                <div class="operateBox">
                  <p v-if="scope.row.state!=70" class="itemBtn" @click="lookDetail(scope.row.id,scope.row.siConfirmation)">查看详情</p>
                  <p v-if="scope.row.state==20&&scope.row.serverUserId" class="itemBtn" @click="stockBtn(scope.row.jdOrderId,scope.row.id)">出库</p>
                  <p v-if="scope.row.state==30&&scope.row.serverUserId" class="itemBtn" @click="deliveryBtn(scope.row.id,scope.row.jdOrderId)">发货</p>
                  <p v-if="scope.row.state!=60&&scope.row.serverUserId&&scope.row.state!=70" class="itemBtn" @click="uploadBtn(scope.row.id,scope.row.jdOrderId)">上传合同发票</p>
                </div>
              </template>
              <template v-else>
                订单金额：
                <br />
                {{ scope.row.orderPrice }}
              </template>
            </template>
          </el-table-column>
          <el-table-column label="收货信息">
            <template slot-scope="scope">
              <div>下单账号：{{ scope.row.jdBuyerName }}</div>
              <div>收货人：{{ scope.row.jdReciverName }}</div>
              <div>收货地址：{{ scope.row.detailAddress }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="state" align="center" label="订单状态" width="100">
            <template slot-scope="scope">
              <span class="orderStatus" :class="{'finished':scope.row.state==50}">{{scope.row.state==70?'取消':(orderStatusList[scope.row.state]||'')}}</span>
              <div v-if="scope.row.state==70">{{scope.row.cancelTime | timeFilter}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="state" align="center" label="回款状态" width="100">
            <template slot-scope="scope">
              <span class="orderStatus" :class="{'finished':scope.row.payState==4||scope.row.payState==5}">{{scope.row.payState | collectionStatusFilter}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" align="center" label="承运信息">
            <template slot-scope="scope">
              {{ scope.row.logisticsCompany }}
              <br />
              {{ scope.row.logisticsNo }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120"></el-table-column>
        </el-table>
        <div class="table-handler">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchData.pageNum" :page-sizes="pageSizeArr" :page-size="searchData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalSize"></el-pagination>
        </div>
      </div>

      <!-- 详情 -->
      <el-dialog title="订单详情" :visible.sync="operation.details" width="1000px" :close-on-click-modal="false" :close-on-press-escape="false">
        <div class="detailBox">
          <el-steps :active="stepActive" align-center>
            <el-step v-for="(item,i) in orderStepInfo" :key="i" :title="item.desc" :description="item.time"></el-step>
          </el-steps>
          <ul class="orderInfo">
            <li class="item">
              <div class="group">
                <label>订单状态：</label>
                <span :class="details.state==50?'success':'warning'">{{orderStatusList[details.state]||''}}</span>
              </div>
              <div class="group">
                <label>订单号：</label>
                <span>{{details.jdOrderId}}</span>
              </div>
              <div class="group">
                <label>报备编号：</label>
                <div class="numList">
                  <template v-if="details.state!=70">
                    <p v-for="(item,i) in details.relationFilingIds" :key="i" v-show="details.relationFilingIds&&details.relationFilingIds.length>0">
                      {{item}}
                      <em class="lookThis" @click="lookThisOrder(item)">查看</em>
                    </p>
                  </template>
                  <template v-else>
                    <p class="warning">未关联</p>
                  </template>
                </div>
              </div>
            </li>
            <li class="item">
              客户备注：
              <span>{{details.buyerMemo}}</span>
            </li>
            <li class="item">
              商家备注：
              <span>{{details.serverMemo}}</span>
            </li>
          </ul>

          <p class="receipt">
            电子回单：
            <template v-if="details.existReceipt">
              <span class="lookThis" @click="receiptDetail(details.orderId)">查看</span>
              <span class="lookThis" @click="receiptDownload(details.orderId)">下载</span>
            </template>
            <span v-else class="grey">暂无信息</span>
          </p>

          <el-table tooltip-effect="dark" style="width: 100%" :data="details.jdPtradeOrderItems" border class="detailTable">
            <el-table-column prop="skuId" align="center" label="商品编号" width="150"></el-table-column>
            <el-table-column prop="skuName" align="center" label="商品名称" :show-overflow-tooltip="true" width></el-table-column>
            <el-table-column prop="num" align="center" label="商品数量" width="110"></el-table-column>
            <el-table-column prop="skuUnit" align="center" label="单位" width="80"></el-table-column>
            <el-table-column align="center" label="价" width="130">
              <template slot-scope="scope">
                <span>¥</span>
                {{scope.row.jdPrice}}
              </template>
            </el-table-column>
            <el-table-column prop="totalRate" align="center" label="总服务费率">
              <template slot-scope="scope" v-if="scope.row.totalRate||Number(scope.row.totalRate+'')===0">{{scope.row.totalRate}}%</template>
            </el-table-column>
            <el-table-column prop="siCollectionAmount" align="center" label="回款SI金额" width="130">
              <template slot-scope="scope" v-if="scope.row.siCollectionAmount||Number(scope.row.siCollectionAmount+'')===0">¥{{scope.row.siCollectionAmount}}</template>
            </el-table-column>
          </el-table>

          <div class="information">
            <div class="item">
              <div class="title">收货人信息</div>
              <ul class="infoBox">
                <li class="infoItem">
                  <p class="name">下单账号：</p>
                  <p class="text" id="accountText">{{details.reciverInfoVO.jdBuyerName}}</p>
                  <i v-if="details.reciverInfoVO.jdBuyerName" aria-label="icon: copy" class="anticon-copy" @click="copyText('accountText')">
                    <svg viewBox="64 64 896 896" focusable="false" class data-icon="copy" width="1em" height="1em" fill="#298df8" aria-hidden="true">
                      <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z" />
                    </svg>
                  </i>
                </li>
                <li class="infoItem">
                  <p class="name">收货人姓名：</p>
                  <p class="text" id="receiverText">{{details.reciverInfoVO.jdReciverName}}</p>
                  <i v-if="details.reciverInfoVO.jdReciverName" aria-label="icon: copy" class="anticon-copy" @click="copyText('receiverText')">
                    <svg viewBox="64 64 896 896" focusable="false" class data-icon="copy" width="1em" height="1em" fill="#298df8" aria-hidden="true">
                      <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z" />
                    </svg>
                  </i>
                </li>
                <li class="infoItem">
                  <p class="name">收货地址：</p>
                  <p class="text" id="addressText">{{details.reciverInfoVO.detailAddress}}</p>
                  <i v-if="details.reciverInfoVO.detailAddress" aria-label="icon: copy" class="anticon-copy" @click="copyText('addressText')">
                    <svg viewBox="64 64 896 896" focusable="false" class data-icon="copy" width="1em" height="1em" fill="#298df8" aria-hidden="true">
                      <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z" />
                    </svg>
                  </i>
                </li>
                <li class="infoItem">
                  <p class="name">手机号码：</p>
                  <p class="text" id="phoneText">{{details.reciverInfoVO.mobile}}</p>
                  <i v-if="details.reciverInfoVO.mobile" aria-label="icon: copy" class="anticon-copy" @click="copyText('phoneText')">
                    <svg viewBox="64 64 896 896" focusable="false" class data-icon="copy" width="1em" height="1em" fill="#298df8" aria-hidden="true">
                      <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z" />
                    </svg>
                  </i>
                </li>
                <li class="infoItem">
                  <p class="name">电子邮件：</p>
                  <p class="text" id="emailText">{{details.reciverInfoVO.email}}</p>
                  <i v-if="details.reciverInfoVO.email" aria-label="icon: copy" class="anticon-copy" @click="copyText('emailText')">
                    <svg viewBox="64 64 896 896" focusable="false" class data-icon="copy" width="1em" height="1em" fill="#298df8" aria-hidden="true">
                      <path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z" />
                    </svg>
                  </i>
                </li>
              </ul>
            </div>
            <div class="item paymentInfo">
              <div class="title">付款信息</div>
              <ul class="infoBox">
                <li class="infoItem">
                  <p class="name">付款类型：</p>
                  <p class="text">{{details.paymentInfoVO.paymentType}}</p>
                </li>
                <li class="infoItem">
                  <p class="name">付款时间：</p>
                  <p class="text">{{details.paymentInfoVO.paymentTime}}</p>
                </li>
                <li class="infoItem">
                  <p class="name">订单金额：</p>
                  <p class="text">¥ {{details.paymentInfoVO.orderPrice||0}}</p>
                </li>
                <li class="infoItem">
                  <p class="name">运费金额：</p>
                  <p class="text">¥ {{details.paymentInfoVO.freight||0}}</p>
                </li>
                <li class="infoItem">
                  <p class="name">优惠金额：</p>
                  <p class="text">¥ {{details.paymentInfoVO.totalDiscount||0}}</p>
                </li>
                <li class="infoItem">
                  <p class="name">支付金额：</p>
                  <p class="text">¥ {{details.paymentInfoVO.paymentPrice||0}}</p>
                </li>
                <li class="infoItem">
                  <p class="name">回款SI总金额：</p>
                  <template v-if="details.paymentInfoVO.siCollectionAmount">
                    <p class="text">¥ {{details.paymentInfoVO.siCollectionAmount}}</p>
                    <el-button size="small" class="siComplete" @click="confirmSi()" v-if="details.paymentInfoVO.siConfirmation==0">金额确认</el-button>
                    <el-button size="small" class="siComplete disabled" v-if="details.paymentInfoVO.siConfirmation!=0">已确认</el-button>
                    <div class="siTips">
                      <div class="left">提示：</div>
                      <div class="right">
                        <p>1.回款金额确认后平台将按此金额进行回款。</p>
                        <p>2.如回款SI总金额有误，请与妥了网客服联系。</p>
                      </div>
                    </div>
                  </template>
                </li>
              </ul>
            </div>
            <div class="item">
              <div class="title">配送信息</div>
              <template v-if="details.state!=70">
                <div class="logistic">
                  <p>
                    承运商：
                    <span>{{details.distributionInfoVO.logisticsCompany}}</span>
                  </p>
                  <p>
                    运单号：
                    <span>{{details.distributionInfoVO.logisticsNo}}</span>
                  </p>
                </div>
                <div class="logisticInfo">
                  <el-timeline v-if="details.distributionInfoVO.logiusticDetailInfo">
                    <el-timeline-item v-for="(activity, index) in details.distributionInfoVO.logiusticDetailInfo" :key="index" :timestamp="activity.time" :color="activity.color">{{activity.context}}</el-timeline-item>
                  </el-timeline>
                  <div class="emptyLogs" v-else>
                    <el-timeline>
                      <el-timeline-item v-for="(item,i) in activities" :key="i" :timestamp="item.timestamp" :color="item.color">{{item.context}}</el-timeline-item>
                    </el-timeline>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="emptyLogs">
                  <el-timeline>
                    <el-timeline-item v-for="(item,i) in activities" :key="i" :timestamp="item.timestamp" :color="item.color">{{item.context}}</el-timeline-item>
                  </el-timeline>
                </div>
              </template>
            </div>
          </div>
        </div>
      </el-dialog>

      <!-- 出库 -->
      <el-dialog title="出库地址" :visible.sync="operation.outStock" width="40%" :close-on-click-modal="false" :close-on-press-escape="false">
        <div class="stockBox">
          <div class="tips">提示：出库地址为默认地址，无需修改直接提交即可！</div>
          <div class="selectBox">
            <label class="addressName">出库地址：</label>
            <el-select class="addressVal" v-model="stockAddress.address" placeholder="请选择" size="small">
              <el-option v-for="(item,i) in stockData" :key="i" :label="item.address" :value="item.addressId"></el-option>
            </el-select>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitStockInfos">提 交</el-button>
          <el-button @click="operation.outStock = false">关 闭</el-button>
        </span>
      </el-dialog>

      <!-- 发货 -->
      <el-dialog title="承运信息" :visible.sync="operation.delivery" width="40%" :close-on-click-modal="false" :close-on-press-escape="false">
        <div class="stockBox">
          <div class="selectBox" v-if="deliveryObj.logisticsCompanyCode!=1274">
            <label class="addressName">
              <span class="mustTips">*</span> 联系电话：
            </label>
            <el-input class="addressVal" size="small" v-model="deliveryObj.contactMobile" placeholder="请输入联系电话"></el-input>
          </div>
          <div class="selectBox">
            <label class="addressName">物流信息：</label>
            <el-select class="addressVal" v-model="deliveryObj.logisticsCompanyCode" placeholder="请选择" size="small">
              <el-option v-for="(logisticItem,index) in deliveryLogisticList" :key="index" :label="logisticItem.companyName" :value="logisticItem.logisticsCompanyCode"></el-option>
            </el-select>
          </div>
          <template v-if="deliveryObj.logisticsCompanyCode==1274">
            <div class="selectBox">
              <label class="addressName">联系电话：</label>
              <el-input class="addressVal" size="small" v-model="deliveryObj.contactMobile" placeholder="请输入联系电话"></el-input>
            </div>
          </template>
          <template v-else>
            <div class="selectBox">
              <label class="addressName">物流单号：</label>
              <el-input class="addressVal" size="small" v-model="deliveryObj.logisticsNo" placeholder="请输入物流单号"></el-input>
            </div>
          </template>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="deliveryEnsure()">提 交</el-button>
          <el-button @click="deliveryClose()">关 闭</el-button>
        </span>
      </el-dialog>

      <!-- 发票合同上传 -->
      <el-dialog title="上传合同发票" :visible.sync="operation.invoice" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
        <div class="uploadBox" v-loading="uploadObj.loading">
          <div class="uploadUp">
            <div class="title">采购合同上传</div>
            <template>
              <div class="upBox" v-if="!uploadObj.contractUrl">
                <el-upload class="upload-demo" :show-file-list="false" drag :accept="uploadObj.type" :http-request="upLoadFile" :data="{id:relatedId,check:1}" action="#" :multiple="false">
                  <div class="name">
                    <i class="icon">
                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-icon fa-svg-icon svg-fa-file_upload" width="35" height="35" viewBox="0 0 24 24" fill="rgb(64, 158, 255)">
                        <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" />
                      </svg>
                    </i>
                    <span>采购合同</span>
                  </div>
                  <p class="unUpload">未上传</p>
                  <div class="uploadText">
                    只可上传单个文件，如有多个文件请压缩后上传
                    <br />上传文件不超过20M
                  </div>
                </el-upload>
              </div>
              <div class="upBox" v-else>
                <div class="uploadSuccBox">
                  <div class="name">
                    <i class="icon">
                      <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon" viewBox="0 0 576 512" width="32" height="32" style="fill: rgb(236, 207, 23);">
                        <path d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z" />
                      </svg>
                    </i>
                    <span>采购合同</span>
                  </div>
                  <div class="uploadTime">上传成功： {{uploadObj.contractUploadtime | timeFilter}}</div>
                  <div class="repeatUpload">
                    <el-upload :show-file-list="false" :accept="uploadObj.type" :http-request="upLoadFile" :data="{id:relatedId,check:1}" action="#" :multiple="false">
                      <el-button size="small" class="uploadBtn againUpload" type="primary">重新上传</el-button>
                    </el-upload>
                    <el-button class="uploadBtn download" size="small" type="primary" @click="downloadBtn(1)">下载</el-button>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <div class="uploadDowm">
            <div class="title">进项发票上传</div>
            <template>
              <div class="downBox" v-if="!uploadObj.invoiceUrl">
                <el-upload class="upload-demo" :show-file-list="false" drag :accept="uploadObj.type" :http-request="upLoadFile" action="#" :multiple="false" :data="{id:relatedId,check:2}">
                  <div class="name">
                    <i class="icon">
                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-icon fa-svg-icon svg-fa-file_upload" width="35" height="35" viewBox="0 0 24 24" fill="rgb(64, 158, 255)">
                        <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" />
                      </svg>
                    </i>
                    <span>进项发票</span>
                  </div>
                  <p class="unUpload">未上传</p>
                  <div class="uploadText">
                    只可上传单个文件，如有多个文件请压缩后上传
                    <br />上传文件不超过20M
                  </div>
                </el-upload>
              </div>
              <div class="downBox" v-else>
                <div class="uploadSuccBox">
                  <div class="name">
                    <i class="icon">
                      <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon" viewBox="0 0 576 512" width="32" height="32" style="fill: rgb(236, 207, 23);">
                        <path d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z" />
                      </svg>
                    </i>
                    <span>进项发票</span>
                  </div>
                  <div class="uploadTime">上传成功： {{uploadObj.invoiceUploadtime | timeFilter}}</div>
                  <div class="repeatUpload">
                    <el-upload :show-file-list="false" :http-request="upLoadFile" :accept="uploadObj.type" action="#" :multiple="false" :data="{id:relatedId,check:2}">
                      <el-button size="small" class="uploadBtn againUpload" type="primary">重新上传</el-button>
                    </el-upload>
                    <el-button class="uploadBtn download" size="small" type="primary" @click="downloadBtn(2)">下载</el-button>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <div class="carefulTips">
            <p class="careful">*请上传进项发票照片或扫描件（仅供核对信息使用，不当做正式收到进项票）。</p>
            <p class="careful">原件请快递至公司</p>
            <p class="careful">收货地址: 广东省 珠海市 香洲区 海滨南路52号中信南航大厦35楼 收件人: 刘志沛 电话：15626917168</p>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
/* eslint-disable eqeqeq */
import dict from '@/lib/dict'
console.log('dict', dict)
export default {
  data () {
    const typeListFun = function () {
      const typeList = [{ desc: '全部报备', code: '' }, ...dict.statusListC3]
      typeList.map((item, index) => {
        if (item.code == 10) {
          // 不展示“未分配”栏
          typeList.splice(index, 1)
        } else {
          item.number = 0
          item.active = false
        }
      })
      return typeList
    }
    return {
      showScreening: true, // 筛选是否折叠
      platformList: [],
      rules: {},
      multipleArr: [],
      operation: {
        details: false, // 详情
        outStock: false, // 出库
        delivery: false, // 发货
        invoice: false, // 发票
      },
      stockAddr: '', // 出库地址
      // 筛选的
      searchData: {
        jdOrderId: '',
        jdReciverName: '',
        orderTime: [],
        purchaseId: '',
        jdBuyerName: '',
        finishTime: [],
        state: '',
        payState: '',
        pageNum: 1, // 页码
        pageSize: 5, // 每页条数
      },
      typeList: typeListFun(),
      orderData: [],
      currentPage: 1,
      currentSize: 5,
      pageSizeArr: [5, 10, 20, 30, 40],
      totalSize: 0, // 厂直订单总条数
      orderStatusList: {
        10: '待分配',
        20: '等待出库',
        30: '等待发货',
        40: '等待确认收货',
        50: '完成',
        60: '删除',
        70: '取消',
      },
      collectionStatusList: [
        { code: '', desc: '全部状态' },
        { code: 1, desc: '采购人未回款' },
        { code: 2, desc: '采购人已回款' },
        { code: 3, desc: '采购人已回款' },
        { code: 4, desc: '已付款(线下支付)' },
        { code: 5, desc: '已付款' },
        { code: 6, desc: '删除' },
      ],
      // 发货
      deliveryObj: {
        logisticsCompanyCode: '',
        contactMobile: '',
        logisticsNo: '',
        jdOrderId: '',
        siteId: '',
        id: '',
      },
      deliveryLogisticList: [
        { companyName: '请选择', logisticsCompanyCode: '' },
      ], // 发货可选物流列表
      // 详情数据
      // 详情进度数据
      orderStepInfo: [
        { code: 1, desc: '提交订单', time: '' },
        { code: 2, desc: '分配服务商', time: '' },
        { code: 3, desc: '商品出库', time: '' },
        { code: 4, desc: '商品发货', time: '' },
        { code: 5, desc: '完成', time: '' },
      ], // 订单进度
      details: {
        // 顶部运单信息
        jdpTradeOrderStateVO: {
          orderTime: '', // 提交订单时间
          orderDistributionTime: '', // 分配服务商时间
          outStockTime: '', // 商品出库时间
          deliveryTime: '', // 商品发货时间
          orderFinishTime: '',
        },
        // 收货人信息
        reciverInfoVO: {
          jdBuyerName: '', // 买家名
          jdReciverName: '', // 收货人名
          detailAddress: '',
          mobile: '',
          email: '',
        },
        // 付款信息
        paymentInfoVO: {
          paymentType: 1, // 支付类型
          paymentTime: '', //
          orderPrice: '', // 订单金额
          purchasePrice: '', // 采购金额
          freight: '',
          totalDiscount: '', // 优惠总金额
          paymentPrice: '', // 实际支付金额
        },
        // 配送信息
        distributionInfoVO: {
          logisticsNo: '', // 物流单号
          logisticsCompany: '', // 物流公司
          logisticsCompanyCode: '',
          logiusticDetailInfo: [],
        },
        jdPtradeOrderItems: [],
      },
      // 默认物流信息
      activities: [
        {
          context: '暂无物流信息',
          timestamp: '',
          color: '#ff2525',
        },
      ],
      jdOrderId: '',
      stockData: [], // 出库数据
      stockAddress: {
        // 出库地址
        address: '',
      },
      relatedId: '', // 主键ID
      uploadObj: {
        type: '.rar,.zip,.doc,.docx,.pdf,.png,.xlsx,.xls,.jpg,.jpeg,.gif', // 支持的类型
        loading: false,
        contractUrl: '', // 合同url
        contractUploadtime: '', // 合同
        invoiceUrl: '', // 发票url
        invoiceUploadtime: '', // 发票
      },
      bulkOutStockObj: {
        // 批量出库
        inOperation: false, // 操作中
        ordersArr: [], // 订单
      },
    }
  },
  computed: {
    limitTableData () {
      const list = this.orderData
      const resultList = []
      if (list) {
        list.map(item => {
          resultList.push({
            id: item.id,
            jdOrderId: item.jdOrderId,
            orderTime: item.orderTime,
            orderDistributionTime: item.orderDistributionTime,
            orderFinishTime: item.orderFinishTime,
            state: item.state,
            mark: true,
            serverUserId: item.serverUserId,
          })
          resultList.push(item)
        })
      }
      return resultList
    },
    stepActive () {
      // 订单状态 10:待分配 20:待出库 30:待发货 50:完成
      let val = 1
      if (this.details.state == 60 || this.details.state == 70) {
        val = 1
      } else {
        val = parseInt(this.details.state / 10)
      }
      return val
    },
  },
  filters: {
    timeFilter (nS) {
      if (!nS) return ''
      var date = new Date(parseInt(nS))
      var year = date.getFullYear()
      var mon = date.getMonth() + 1
      var day = date.getDate()
      var hours = date.getHours()
      var minu = date.getMinutes()
      var sec = date.getSeconds()
      hours < 10 && (hours = '0' + hours)
      minu < 10 && (minu = '0' + minu)
      sec < 10 && (sec = '0' + sec)

      return year + '/' + mon + '/' + day + ' ' + hours + ':' + minu + ':' + sec
    },
    collectionStatusFilter (status) {
      if (!status) return ''
      let result = ''
      const list = [
        { code: '', desc: '全部状态' },
        { code: 1, desc: '采购人未回款' },
        { code: 2, desc: '采购人已回款' },
        { code: 3, desc: '采购人已回款' },
        { code: 4, desc: '已付款(线下支付)' },
        { code: 5, desc: '已付款' },
        { code: 6, desc: '删除' },
      ]
      for (let index = 0; index < list.length; index++) {
        if (status == list[index].code) {
          result = list[index].desc
          return result
        }
      }
      return result
    },
  },
  watch: {
    multipleArr (val) {
      let i = 0
      if (!val) return
      val.map(item => {
        if (item.mark) {
          i++
        }
      })
      if (i == this.currentSize) {
        this.$nextTick(() => {
          this.limitTableData.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row, true)
          })
        })
      } else if (i === 0) {
        this.$nextTick(() => {
          this.limitTableData.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row, false)
          })
        })
      }
    },
  },
  methods: {
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      return 'background-color: #f5f5f5;color: #333;font-weight: bold;text-align:center'
    },
    /**
     * 厂直订单——列表内勾选项改变
     */
    handleSelectionChange (val) {
      this.multipleArr = val
    },
    // 厂直订单——合并单元格
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return [2, 1]
        } else {
          return [0, 0]
        }
      }
      if (rowIndex % 2 === 0) {
        if (columnIndex === 1) {
          return [1, 6]
        } else if (columnIndex === 2) {
          return [2, 1]
        } else {
          return [0, 0]
        }
      }
    },
    /**
     * 厂直订单——切换每页显示条数
     */
    handleSizeChange (val) {
      this.searchData.pageSize = val
      this.searchData.pageNum = 1
      this.getOrderList()
    },
    /**
     * 厂直订单——翻页
     */
    handleCurrentChange (val) {
      this.searchData.pageNum = val
      this.getOrderList()
    },
    // 厂直订单——订单状态筛选
    filterList (type) {
      this.typeList.map(item => {
        item.active = false
      })
      type.active = true
      this.searchData.state = type.code
      this.searchData.pageNum = 1
      this.getOrderList()
    },
    /**
     * 厂直订单——筛选查询厂直订单
     */
    searchFunc () {
      this.searchData.pageNum = 1
      this.getOrderList()
    },

    /**
     * 厂直订单——获取列表数据
     */
    getOrderList () {
      if (this.searchData.orderTime.length > 0) {
        this.searchData.orderTimeStart = this.additionalTime(
          this.searchData.orderTime[0],
        )
        this.searchData.orderTimeEnd = this.additionalTime(
          this.searchData.orderTime[1],
          true,
        )
      } else {
        this.searchData.orderTimeStart = null
        this.searchData.orderTimeEnd = null
      }
      if (this.searchData.finishTime.length > 0) {
        this.searchData.orderFinishTimeStart = this.additionalTime(
          this.searchData.finishTime[0],
        )
        this.searchData.orderFinishTimeEnd = this.additionalTime(
          this.searchData.finishTime[1],
          true,
        )
      } else {
        this.searchData.orderFinishTimeStart = null
        this.searchData.orderFinishTimeEnd = null
      }
      const param = {}
      Object.keys(this.searchData).map(item => {
        if (!(item == 'orderTime' || item == 'finishTime')) {
          param[item] = this.searchData[item]
        }
      })
      this.$axios
        .post('/api/order/queryJdpOrderData', param)
        .then(orderListRes => {
          if (orderListRes.success) {
            const _result = orderListRes.result
            this.orderData = _result.jdPtradeOrders
            this.totalSize = _result.total

            this.typeList.map((item, index) => {
              switch (parseInt(item.code)) {
                case 10:
                  item.number = _result.jdpOrderBaseInfoCount.waitDistribute
                  break
                case 20:
                  item.number = _result.jdpOrderBaseInfoCount.waitDelivered
                  break
                case 30:
                  item.number = _result.jdpOrderBaseInfoCount.waitDeliver
                  break
                case 40:
                  item.number = _result.jdpOrderBaseInfoCount.confirmReceipt
                  break
                case 50:
                  item.number = _result.jdpOrderBaseInfoCount.orderFinish
                  break
                case 60:
                  item.number = _result.jdpOrderBaseInfoCount.orderDelete
                  break
                case 70:
                  item.number = _result.jdpOrderBaseInfoCount.orderCancel
                  break
                default:
                  item.number = _result.jdpOrderBaseInfoCount.totalCount - _result.jdpOrderBaseInfoCount.orderCancel || 0
                  break
              }
            })
          } else {
            this.$message.error(orderListRes.desc)
          }
        })
    },
    /**
     * 厂直订单——导出订单
     */
    exportExcel () {
      const arr = []
      this.multipleArr.map(item => {
        if (item.mark && arr.indexOf(item.id) < 0) {
          arr.push(item.id)
        }
      })
      if (arr.length == 0) {
        this.$message({
          type: 'error',
          message: '您还未选择订单',
        })
        return
      }

      window.location.href =
        window.globalConfig.apiUrl +
        '/api/order/exportJdpOrderExcel?Token=' +
        '&exportIds=' +
        encodeURIComponent(JSON.stringify(arr))
    },
    /**
     * 厂直订单——批量出库
     */
    bulkOutStock () {
      const arr1 = [] // 存储已勾选订单
      const arr2 = [] // 存储可出库订单

      this.multipleArr.map(item => {
        if (item.mark && arr1.indexOf(item.id) < 0) {
          arr1.push(item.id)
          if (item.state == 20 && item.serverUserId) { arr2.push({ id: item.id, jdOrderId: item.jdOrderId }) }
        }
      })

      if (arr1.length < 1) {
        this.$message({
          type: 'error',
          message: '您还未选择订单',
        })
        return
      }
      if (arr2.length < 1) {
        this.$message({
          type: 'error',
          message: '您选择的订单均不可出库',
        })
        return
      }

      this.bulkOutStockObj.ordersArr = arr2
      this.bulkOutStockObj.inOperation = true

      this.$axios.post('/api/order/getOutStockAddress').then(resp => {
        if (resp.success) {
          this.operation.outStock = true
          this.stockData = resp.result.deliveryAddressQueryResult
          this.stockAddress.address = this.stockData[0].address
        } else {
          this.$message.error(resp.desc)
        }
      })
    },

    // 厂直订单列表操作栏——查看详情
    lookDetail (id) {
      this.relatedId = id
      this.operation.details = true
      this.getDateilData(id)
    },
    // 获取详情数据
    getDateilData (id) {
      this.$axios
        .post('/api/order/queryJdpOrderDataDetails', { id: id })
        .then(detailRes => {
          if (detailRes.success) {
            this.details = detailRes.result.jdpTradeOrdersDetailResponse
            if (this.details.relationFilingIds) {
              this.details.relationFilingIds = this.details.relationFilingIds.split(
                ',',
              )
            }
            if (this.details.distributionInfoVO.logiusticDetailInfo) {
              this.details.distributionInfoVO.logiusticDetailInfo[0].color =
                '#ff2525'
            }

            this.orderDateFun(this.details.jdpTradeOrderStateVO)
          } else {
            this.$message.error(detailRes.desc)
          }
        })
    },
    // 查看详情 时间戳转化
    orderDateFun (obj) {
      const _this = this
      const arr = Object.values(obj)
      for (let i = 0; i < arr.length; i++) {
        _this.orderStepInfo[i].time = _this.timeFilter(arr[i])
      }
    },
    timeFilter (nS) {
      if (!nS) return ''
      var date = new Date(parseInt(nS))
      var year = date.getFullYear()
      var mon = date.getMonth() + 1
      var day = date.getDate()
      var hours = date.getHours()
      var minu = date.getMinutes()
      var sec = date.getSeconds()
      hours < 10 && (hours = '0' + hours)
      minu < 10 && (minu = '0' + minu)
      sec < 10 && (sec = '0' + sec)

      return year + '/' + mon + '/' + day + ' ' + hours + ':' + minu + ':' + sec
    },
    /** 厂直订单列表操作栏——出库
     * @param {orderId}
     */
    stockBtn (orderId, id) {
      this.bulkOutStockObj.inOperation = false
      this.jdOrderId = orderId
      this.relatedId = id
      this.$axios
        .post('/api/order/getOutStockAddress', { jdOrderId: orderId })
        .then(resp => {
          if (resp.success) {
            this.operation.outStock = true
            this.stockData = resp.result.deliveryAddressQueryResult
            this.stockAddress.address = this.stockData[0].address
          } else {
            this.$message.error(resp.desc)
          }
        })
    },

    /**
     * 提交选择的出库地址
     * @param {obj}
     */
    submitStockInfos () {
      if (this.bulkOutStockObj.inOperation) {
        this.$axios
          .post('/api/order/batchCommitOutStockAddress', {
            outStockAddress: this.stockAddress.address,
            jdOrderIdList: this.bulkOutStockObj.ordersArr,
          })
          .then(resp => {
            if (resp.success) {
              this.$message.success('批量出库成功')
              this.bulkOutStockObj.inOperation = false
              this.bulkOutStockObj.ordersArr = []
              this.operation.outStock = false
              this.getOrderList()
            } else {
              this.$message.error(resp.desc)
            }
          })
      } else {
        this.$axios
          .post('/api/order/commitOutStockAddress', {
            jdOrderId: this.jdOrderId,
            outStockAddress: this.stockAddress.address,
            id: this.relatedId,
          })
          .then(resp => {
            if (resp.success) {
              this.$message.success('出库成功')
              this.operation.outStock = false
              this.getOrderList()
            } else {
              this.$message.error(resp.desc)
            }
          })
      }
    },
    // 厂直订单列表操作栏——发货
    deliveryBtn (id, orderId) {
      this.deliveryObj = {
        logisticsCompanyCode: '',
        contactMobile: '',
        logisticsNo: '',
        jdOrderId: orderId,
        siteId: '',
        id: id,
      }
      this.operation.delivery = true
      this.$axios.post('/api/order/getDeliveryCompany').then(deliveryRes => {
        if (deliveryRes.success) {
          if (deliveryRes.result.jdpDeliveryCompanyBases.length > 0) {
            this.deliveryLogisticList =
              deliveryRes.result.jdpDeliveryCompanyBases
          } else {
            this.deliveryLogisticList = [
              { companyName: '请选择', logisticsCompanyCode: '' },
            ]
          }
        }
      })
    },
    // 查看详情——查看
    lookThisOrder (id) {
      this.$router.push({ path: '/customer/order', query: { filingNumber: id } })
    },

    /**
     * 查看详情——复制文本
     */
    copyText (id) {
      var text = document.getElementById(id)
      if (document.body.createTextRange) {
        // createTextRange是用在IE中的
        const range = document.body.createTextRange()
        range.moveToElementText(text)
        range.select()
        this.$message.success('复制成功')
      } else if (window.getSelection) {
        var selection = window.getSelection()
        const range = document.createRange()
        range.selectNodeContents(text)
        selection.removeAllRanges()
        selection.addRange(range)
        document.execCommand('Copy')
        this.$message.success('复制成功')
      } else {
        this.$message.error('复制失败')
      }
    },
    // 查看详情——回款金额确认
    confirmSi () {
      this.$confirm('确认回款SI总金额无误？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$axios
            .post(`/api/order/confirmSiCcollectionmount/${this.relatedId}`)
            .then(res => {
              if (res.success) {
                this.$message.success('金额确认成功')
                this.getDateilData(this.relatedId)
              } else {
                this.$message.error(res.desc)
              }
            })
        })
        .catch(() => {})
    },
    // 发货——提交
    deliveryEnsure () {
      if (!this.deliveryObj.logisticsCompanyCode) {
        this.$message.error('请选择物流')
        return
      }
      if (this.deliveryObj.logisticsCompanyCode == 1274) {
        if (!this.deliveryObj.contactMobile) {
          this.$message.error('请输入联系电话')
          return
        }
        const reg = /^([1][3,5,7,8][0-9]{9})|((([0+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?)$/
        if (!reg.test(this.deliveryObj.contactMobile)) {
          this.$message.error('请输入正确的联系电话')
          return
        }
      } else {
        if (!this.deliveryObj.logisticsNo) {
          this.$message.error('请输入物流单号')
          return
        }
      }
      for (let i = 0; i < this.deliveryLogisticList.length; i++) {
        if (
          this.deliveryLogisticList[i].logisticsCompanyCode ==
          this.deliveryObj.logisticsCompanyCode
        ) {
          this.deliveryObj.logisticsCompany = this.deliveryLogisticList[
            i
          ].companyName
          this.deliveryObj.siteId = this.deliveryLogisticList[i].siteId
          break
        }
      }
      this.$axios
        .post('/api/order/commitDelivery', this.deliveryObj)
        .then(res => {
          if (res.success) {
            this.$message.success('提交成功')
            this.operation.delivery = false
            this.getOrderList()
          } else {
            this.$message.error(res.desc)
          }
        })
    },
    // 发货——关闭并重置发货弹窗
    deliveryClose () {
      this.operation.delivery = false
    },
    /**
     * 日期选择——时间补充时分秒
     * isEnd 结束时间
     */
    additionalTime (date, isEnd) {
      if (date) {
        if (isEnd) {
          date += ' 23:59:59'
        } else {
          date += ' 00:00:00'
        }
      }
      return date
    },

    /**
     * @name: 上传合同发票弹窗
     * @param {type}
     * @return:
     */
    uploadBtn (id, jdId) {
      this.relatedId = id
      this.jdOrderId = jdId
      this.operation.invoice = true
      this.$axios
        .post('/api/order/queryJdpOrderData', { jdOrderId: jdId })
        .then(res => {
          if (res.success) {
            this.uploadObj.contractUrl =
              res.result.jdPtradeOrders[0].purchaseContractUrl
            this.uploadObj.invoiceUrl = res.result.jdPtradeOrders[0].incomeUrl
            this.uploadObj.contractUploadtime =
              res.result.jdPtradeOrders[0].purchaseContractUploadtime
            this.uploadObj.invoiceUploadtime =
              res.result.jdPtradeOrders[0].incomeUploadtime
          } else {
            this.$message.error(res.desc)
          }
        })
    },
    // 上传文件   1合同   2发票
    upLoadFile (param) {
      this.$confirm('是否上传 ' + param.file.name + ' 文件', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.uploadObj.loading = true
          const type = '.' + param.file.name.replace(/.+\./, '') // 文件类型
          const isLt2M = param.file.size / 1024 / 1024 < 20 // 是否小于20M
          const arr = this.uploadObj.type.split(',')
          if (arr.indexOf(type) === -1) {
            this.$message.error('上传文件格式不正确')
            this.uploadObj.loading = false
            return
          }
          if (!isLt2M) {
            this.$message.error('上传文件大小不能超过 20MB!')
            this.uploadObj.loading = false
            return
          }

          const form = new FormData()
          form.append('file', param.file)
          form.append('id', param.data.id)
          form.append('check', param.data.check)
          this.$axios
            .post('/api/order/contractOrIncomeUpload', form)
            .then(res => {
              this.uploadObj.loading = false
              if (res.success) {
                this.$message.success('上传文件成功')
                if (param.data.check == 1) {
                  this.uploadObj.contractUrl = res.result.fileUrl
                  this.uploadObj.contractUploadtime = res.result.uploadTime
                } else {
                  this.uploadObj.invoiceUrl = res.result.fileUrl
                  this.uploadObj.invoiceUploadtime = res.result.uploadTime
                }
              } else {
                this.$message.error(res.desc)
              }
            })
        })
        .catch(() => {})
    },

    /**
     * @name: 重新上传 下载
     * @param {type} 1合同   2发票
     * @return:
     */
    downloadBtn (type) {
      window.location.href =
        '/api/order/contractOrIncomeDownload?jdOrderId=' +
        this.jdOrderId +
        '&check=' +
        type
    },
    receiptDetail (orderId) {
      this.$axios
        .post('/api/order/queryOrderReceiptInfo', {
          billType: 1,
          orderId: orderId,
        })
        .then(resp => {
          if (resp.success) {
            window.open(resp.result.data)
          } else {
            this.$message.error(resp.desc)
          }
        })
    },
    receiptDownload (orderId) {
      window.location.href =
        '/api/order/downloadOrderReceiptInfo?billType=1&orderId=' + orderId
    },
  },
  mounted () {
    const _state = parseInt(this.searchData.state) || 0
    this.filterList(this.typeList[_state])
  },
}
</script>

<style lang="less" scoped>
@themeColor: #298df8;
.grey {
  color: #999;
}
.factoryOrder {
  // 筛选部分
  .screening-box {
    border: 1px solid #bbb;
    .form {
      width: 100%;
      .screening-head {
        background: #f5f5f5;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .toggle {
          cursor: pointer;
          margin-right: 50px;
        }
      }
      .screening-body {
        border-top: 1px solid #bbb;
        /deep/.el-form-item {
          margin-bottom: 10px;
        }
      }
    }
  }
  // table
  .tableList {
    margin-top: 24px;
    .statusBox {
      display: flex;
      align-items: center;
      .statusBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 130px;
        height: 30px;
        border: 1px solid #bbb;
        background: #fff;
        margin-right: 10px;
        font-size: 12px;
        box-sizing: border-box;
        cursor: pointer;
        .count {
          color: #ff2525;
        }
      }
      .statusActive {
        background: @themeColor;
        color: #fff;
        border-color: @themeColor;
        .count {
          color: #fff;
        }
      }
    }
    .tableBox {
      width: 100%;
      margin-top: 10px;
      background: #f3f3f3;
      // border: 1px solid #bbb;
      .title {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 28px;
        border: 1px solid #bbb;
        border-bottom: none;
        .left {
          display: flex;
          align-items: center;
          .icon {
            display: block;
            width: 18px;
            height: 14px;
            margin-right: 10px;
          }
        }
      }
      .operateBox {
        .itemBtn {
          margin-bottom: 10px;
          cursor: pointer;
          color: @themeColor;
        }
      }
    }
  }

  // 详情
  .detailBox {
    max-height: 500px;
    overflow-y: auto;
    .orderInfo {
      margin: 10px 0;
      padding: 10px 0 10px 20px;
      border: 1px solid @themeColor;
      background: rgba(180, 180, 180, 0.14);
      .item,
      .group {
        display: flex;
      }
      .item {
        margin-bottom: 10px;
        font-weight: 600;
        font-size: 13px;
        color: #101010;
      }
      .group {
        // width: 20%;
        margin-right: 30px;
        flex-shrink: 0;
        label {
          flex-shrink: 0;
        }
        span {
          display: inline-block;
          min-width: 70px;
        }
        .warning {
          color: #ff2b2b;
        }
        .success {
          color: #27b148;
        }
        .numList {
          display: flex;
          flex-wrap: wrap;
          p {
            margin: 0 25px 5px 0;
          }
        }
        &:last-child {
          flex-shrink: 1;
          margin-right: 0;
        }
      }
    }
    .detailTable {
      max-height: 200px;
      overflow-y: auto;
    }
    .information {
      display: flex;
      border: 1px solid #bbb;
      margin-top: 10px;
      margin-bottom: 50px;
      .item {
        flex: 2;
        padding: 20px;
        font-size: 13px;
        border-right: 1px solid #bbb;
        &:last-child {
          border: none;
        }
        .title {
          color: #101010;
          font-weight: 600;
        }
        .logistic {
          display: flex;
          align-items: center;
          margin-top: 15px;
          color: #101010;
          font-weight: 600;
          p {
            margin-right: 10px;
          }
        }
        .logisticInfo {
          margin-top: 15px;
          height: auto;
          max-height: 150px;
          overflow-y: auto;
          padding-left: 5px;
          line-height: 20px;
          /deep/.el-timeline {
            font-size: 13px;
          }
          /deep/.el-timeline-item {
            &:first-child {
              .el-timeline-item__content,
              .el-timeline-item__timestamp {
                color: #ff2525 !important;
              }
            }
          }
        }
        .infoItem {
          display: flex;
          align-items: baseline;
          margin-top: 10px;
          line-height: 22px;
          position: relative;
          .text {
            max-width: 235px;
          }
          .siComplete {
            background: #e41300;
            color: #fff;
            margin-left: 20px;
            &.disabled {
              background: #bbb;
              cursor: not-allowed;
            }
          }
          .siTips {
            width: 120%;
            display: flex;
            position: absolute;
            bottom: -70px;
            left: 0;
            color: #e41300;
            font-size: 12px;
          }
        }
        .emptyLogs {
          margin-top: 20px;
          /deep/.el-timeline-item {
            &:first-child {
              .el-timeline-item__content,
              .el-timeline-item__timestamp {
                color: #ff2525 !important;
              }
            }
          }
        }
      }
    }
  }
  // 分配订单
  .group {
    .el-form-item {
      margin-bottom: 10px;
    }
    .searchBtn {
      width: 90px;
      height: 30px;
      background: @themeColor;
      color: #fff;
      font-size: 12px;
      text-align: center;
      margin-left: 50px;
    }
    .resetBtn {
      background: #fff;
      color: @themeColor;
    }
  }
  .pageBox {
    margin-top: 20px;
    text-align: right;
  }

  // 出库window
  .stockBox {
    padding: 0 20px;
    .tips {
      color: #ff2525;
    }
    .selectBox {
      margin-top: 20px;
      display: flex;
      align-items: center;
      .addressName {
        color: #101010;
        font-weight: bold;
        flex: 1;
        text-align: right;
      }
      .addressVal {
        flex: 5;
      }
      .mustTips {
        color: #e51c23;
      }
    }
  }

  // 关联报备
  .reportBox {
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      .num {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #f5f7fa;
        border: 2px solid #93969c;
        color: #93969c;
      }
      .btnBox {
        display: flex;
        align-items: center;
        .btnItem {
          width: 80px;
          height: 30px;
          line-height: 30px;
          background: #0980ce;
          color: #fff;
          font-size: 12px;
          text-align: center;
          margin-right: 15px;
          cursor: pointer;
        }
        .right {
          background: #fff;
          color: #0980ce;
          border: 1px solid #0980ce;
        }
      }
      .lookStock {
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        text-align: center;
        background: #0980ce;
        color: #fff;
        cursor: pointer;
      }
    }
    .lastItem {
      width: 100%;
      border: 1px dotted #bbb;
      height: 38px;
      line-height: 38px;
      text-align: center;
      cursor: pointer;
    }
  }

  // 取消分配
  .unassignBox {
    padding: 0 20px;
    font-weight: bold;
    color: #101010;
  }
}
.orderListTable {
  font-size: 13px;
  .orderInfo {
    margin-right: 20px;
    font-size: 12px;
  }
  .productItem {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .logisticsItem {
    margin-bottom: 10px;
    text-align: center;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .image {
    max-width: 50px;
    max-height: 50px;
    margin-right: 13px;
  }
  .productName {
    color: @themeColor;
  }
  .productInfo {
    font-size: 12px;
    span {
      margin-right: 15px;
    }
  }
  .moreProduct {
    text-align: center;
    font-size: 12px;
    color: #9f9e9e;
    margin-top: 8px;
  }
  /deep/.el-table .cell.el-tooltip {
    white-space: normal;
  }
}
.table-handler {
  padding: 5px 15px;
  background-color: #fff;
  text-align: right;
  border: 1px solid #bbb;
  border-top: none;
}
.anticon-copy {
  margin-left: 5px;
  cursor: pointer;
}
.distributeOrderTable {
  /deep/.el-radio {
    .el-radio__label {
      display: none;
    }
  }
}
.orderStatus {
  color: #ff2525;
  &.finished {
    color: #27b148;
  }
}
/deep/.el-dialog__header {
  padding: 10px 20px 10px;
  background: @themeColor;
  .el-dialog__title {
    font-size: 14px;
    color: #fff;
  }
  .el-dialog__headerbtn {
    top: 10px;
    font-size: 20px;
    .el-dialog__close {
      color: #fff;
    }
  }
}
/deep/.el-dialog__footer {
  text-align: center;
  .el-button {
    padding: 10px 0;
    width: 120px;
  }
}
/deep/.el-table td,
/deep/.el-table th.is-leaf,
/deep/.el-table--border,
/deep/.el-table--group {
  border-color: #bbb;
}
/deep/.el-table--border::after,
/deep/.el-table--group::after,
/deep/.el-table::before {
  background-color: #bbb;
}

/deep/.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
/deep/.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

//upload样式
.uploadBox {
  .title {
    font-weight: 600;
    color: #101010;
    margin-bottom: 10px;
  }
  .upBox,
  .downBox {
    text-align: center;
    .name {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
      span {
        font-size: 16px;
        color: #101010;
        margin-left: 15px;
      }
    }
    .unUpload {
      margin-top: 10px;
      color: #e51c23;
      font-size: 16px;
    }
    .uploadText {
      font-size: 12px;
      color: #101010;
      margin-top: 15px;
    }
    /deep/.el-upload-dragger {
      border: 1px solid #bbb;
    }
    .uploadSuccBox {
      width: 360px;
      height: 180px;
      margin: 0 auto;
      border: 1px solid #bbb;
      border-radius: 5px;
      .repeatUpload {
        display: flex;
        align-items: center;
      }
      .uploadTime {
        color: #101010;
        margin-top: 15px;
      }
      .repeatUpload {
        width: 70%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24px;
        .uploadBtn {
          padding: 8px 15px;
          background: #fff;
          color: #101010;
          border-color: #bbb;
        }
        .download {
          padding: 8px 27px;
        }
      }
    }
  }
  .carefulTips {
    padding-left: 150px;
    margin-top: 24px;
    .careful {
      color: #e51c23;
      font-size: 12px;
      padding: 4px 0;
    }
  }
}
.btnArea {
  display: flex;
  .btn {
    width: 110px;
    height: 30px;
    line-height: 30px;
    background: #298df8;
    color: #fff;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    margin-left: 15px;
  }
}
.receipt {
  margin: 20px;
  font-weight: 600;
  font-size: 13px;
  color: #101010;
}
.lookThis {
  color: @themeColor;
  cursor: pointer;
  margin: 0 5px;
}
</style>
